<template>
    <div>
        <div class="search">
            <el-autocomplete
                    v-model="state"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="请输入关键字"
                    @select="handleSelect"
            />
            <el-button type="primary" icon="el-icon-search"></el-button>
        </div>
        <div class="Tree">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
<!--                 <i class="el-icon-eleme" />-->
                <span slot-scope="{ node, data }">
          <i class="iconfont el-icon-folder-opened"/>
          <span style="padding-left: 4px;">{{ node.label }}</span>
        </span>
            </el-tree>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                restaurants: [],
                state: '',
                timeout: null,
                data: [{
                    label: 'A栋',
                    children: [{
                        label: '车间1',
                    }, {
                        label: '车间2',
                    }, {
                        label: '车间3',
                    }, {
                        label: '车间4',
                    }, {
                        label: '车间5',
                    }, {
                        label: '车间6',
                    }]
                }, {
                    label: 'B栋',
                    children: [{
                        label: '车间1',
                    }, {
                        label: '车间2',
                    }, {
                        label: '车间3',
                    }, {
                        label: '车间4',
                    }, {
                        label: '车间5',
                    }, {
                        label: '车间6',
                    }]
                }, {
                    label: 'C栋',
                    children: [{
                        label: '车间1',
                    }, {
                        label: '车间2',
                    }, {
                        label: '车间3',
                    }, {
                        label: '车间4',
                    }, {
                        label: '车间5',
                    }, {
                        label: '车间6',
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        mounted() {
            this.restaurants = this.loadAll()
        },
        methods: {
            loadAll() {
                return [
                    {'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号'},
                    {'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号'},
                    {'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113'},
                    {'value': '泷千家(天山西路店)', 'address': '天山西路438号'},
                    {'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101'},
                    {'value': '贡茶', 'address': '上海市长宁区金钟路633号'}
                ]
            },
            querySearchAsync(queryString, cb) {
                const restaurants = this.restaurants
                const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

                clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    cb(results)
                }, 3000 * Math.random())
            },
            createStateFilter(queryString) {
                return (state) => {
                    // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
                    return state.value === 0
                }
            },
            handleSelect(item) {
                console.log(item)
            },
            // 树状
            handleNodeClick(data) {
                console.log(data)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .search {
        padding-top: 1.25rem;
        display: flex;
        justify-content: center;
    }

    .Tree {
        margin-top: 1.25rem;
    }

    .search .el-input__inner {
        background-color: #ffffff;
        border: 1px solid #747474;
        color: #f4f4f5;
    }

    .search .el-input__inner:focus {
        border-color: #ffffff;
        outline: 0;
    }

    .search .el-input__inner:hover {
        border-color: #747474;
        outline: 0;
    }

    .Tree .el-tree {
        background-color: #ffffff;
    }

    .Tree .el-tree-node__content:hover {
        background-color: #A6E7CC;
    }

    .Tree .el-tree-node:focus > .el-tree-node__content {
        background-color: #ffffff;
    }

    .Tree .el-tree-node__label {
        color: #ffffff;
    }
    .el-tree-node,.is-current{
        background-color: #A6E7CC;
    }
    .el-tree-node, .is-current, .is-focusable {
        background-color: #fdfdfd;
    }

</style>
<style>

</style>
